<template>
  <div class="">
    <!-- <button @click="toggleWeekends">toggle weekends</button> -->
    <FullCalendar
      :options="calendarOptions"
    />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
// import $ from 'jquery'
export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data () {
    return {
      calendarOptions: {
        header: {
          left: 'prev, next, today',
          center: 'title',
          right: 'month'
        },
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        dateClick: this.handleDateClick,
        events: function (prev, callback) {
          console.log(prev, callback)
        }
      }
    }
  },
  created () {},
  methods: {
    handleDateClick: function (arg) {}
  }
}
</script>

<style lang='less'></style>
